<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
          </el-breadcrumb>

          <el-card>
              <el-row :gutter="30">
                <el-col :span="8">
                    <el-input v-model="input" placeholder="请输入用户名" clearable>
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                </el-input>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
                </el-col>
              </el-row>
                <el-table  height=360px stripe border style="width: 100%"
                :data="tableData.filter(data => !input || data.username.toLowerCase().includes(input.toLowerCase()))">
                    <el-table-column prop="id" label="id" width="50"></el-table-column>
                    <el-table-column prop="username" label="用户名" width="130"></el-table-column>
                    <el-table-column prop="password" label="密码" width="130"></el-table-column>
                    <el-table-column prop="tel" label="电话号码" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址" ></el-table-column>
                    <el-table-column prop="role" label="是否为管理员" width="130">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.role" disabled></el-switch>
                          </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180px">
                        <template slot-scope="scope">
                            <el-tooltip  effect="dark" content="修改信息" placement="top" :enterable="false">
                                <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip  effect="dark" content="删除信息" placement="top" :enterable="false">
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
          </el-card>

          <!-- 添加用户 -->
          <el-dialog title="添加用户" :visible.sync="addDialogVisible">
            <el-form :model="ruleForm" ref="addFromRef" status-icon :rules="addFromRules"  label-width="100px" >
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="tel">
                  <el-input v-model="ruleForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="是否管理员" prop="tel">
                    <el-select v-model="ruleForm.role" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
              </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
          </el-dialog>
          
          <!-- 修改信息 -->
          <el-dialog title="修改信息" :visible.sync="editDialogVisible">
            <el-form :model="editForm" ref="addFromRef" status-icon :rules="addFromRules"  label-width="100px" >
                <el-form-item label="id" prop="id">
                    <el-input v-model="editForm.id" readOnly></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="editForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="editForm.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="tel">
                  <el-input v-model="editForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="是否管理员" prop="tel">
                    <el-select v-model="editForm.role" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
              </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editUserInfo">确 定</el-button>
            </div>
          </el-dialog>
    </div>
</template>

<script>
    export default {
        
        data() {
            // 校验手机号规则
            var checkMobile = (rule, value, cb) =>{
            let regMobile = /^(0|86|17951)?(1[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
                if (regMobile.test(value)) {
                return cb()
                }else{
                cb(new Error('手机号码格式不正确'))
                }

            }
            return {
                input: '',
                tableData:[],
                addDialogVisible: false,
                editDialogVisible: false,
                ruleForm:{
                    username: '',
                    password: '',
                    address: '',
                    tel: '',
                    role: '',
                    token: '43b4hj32b4h3b'
                },
                addFromRules: {
                    username:[
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入地址', trigger: 'blur' },
                        { min: 3, max: 40, message: '长度在 3 到 40 个字符', trigger: 'blur' }
                    ],
                    tel: [
                        { required: true, message: '请输入电话号码', trigger: 'blur' },
                        { validator: checkMobile, trigger: 'blur' }
                    ]

                },
                options:[
                    {
                        value: true,
                        label: 'true'
                    },
                    {
                        value: false,
                        label: 'false'
                    }
                ],
                editForm: {}

            }
        },
        created() {
            this.getUserinfo();   
        },
        methods: {
            async getUserinfo(){
                const {data: res} = await this.$http.get('http://127.0.0.1:8181/user/findAll')
                this.tableData = res
            },
            submitForm(){
                
                this.$refs.addFromRef.validate(async valid => {
                    if (valid) {
                        const {data: que} = await this.$http.get('http://127.0.0.1:8181/user/findByUname/' + this.ruleForm.username)
                        // console.log(que)
                        if (que.length == 0) {
                           const res = await this.$http.post('http://127.0.0.1:8181/user/saveUser', this.ruleForm)
                        // console.log(res)
                            if (res.data == 'success') {
                                this.addDialogVisible = false
                                this.getUserinfo()
                                return this.$message.success('添加用户成功！')
                            }
                                return this.$message.error('用户添加失败！') 
                        }
                        return this.$message.warning('用户名已存在，请重新输入！')
                    }
                })
            },
            async removeUserById(id){
                const confirmresult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err =>{
                    err
                })
                if (confirmresult != 'confirm') {
                    return this.$message('已经取消了删除!')
                }

                const res= await this.$http.delete('http://127.0.0.1:8181/user/deleteById/' + id)
                // console.log(res)
                if (res.status != 200) {
                    return  this.$message.error('删除用户失败')
                }
                    this.$message.success('删除用户成功')
                    this.getUserinfo()
            },
            async showEditDialog(id){
                this.editDialogVisible =true
                const {data: res} = await this.$http.get('http://127.0.0.1:8181/user/findById/' + id)
                // console.log(this)
                this.editForm =res
            },
            editUserInfo(){
                this.$refs.addFromRef.validate(async valid => {
                    if (valid) {
                           const res = await this.$http.put('http://127.0.0.1:8181/user/update', this.editForm)
                        // console.log(res)
                            if (res.data == 'success') {
                                this.editDialogVisible = false
                                this.getUserinfo()
                                return this.$message.success('修改用户成功！')
                            }
                                return this.$message.error('用户修改失败！') 
                    }
                })
            }
        
        }
    }
</script>
<style scoped>

</style>